import { _decorator, Component, Label } from 'cc';
const { ccclass, inspector, property } = _decorator;

import { VMButtonClick, VMLabel, VMEvent, mvvm } from "../../framework/vm/VMDecorator";
import * as cc from "cc";
import { VMEntity } from '../../framework/vm/VMEntity';
import { VMCenter } from '../../framework/vm/VMCenter';
import { DemoVMSceneBase } from './DemoVMSceneBase';
@ccclass('DemoVMEvent')
// @mvvm()
export default class DemoVMEvent extends DemoVMSceneBase implements IMVVM {
    _vmTag: string;
    _vmEntitys: VMEntity[];

    @property(cc.CCBoolean)
    valueClamp: boolean = false;

    @property(cc.Label)
    labelTemplete: cc.Label = null;

    // @VMLabel({ watchPath: '*.power' })
    @property(Label)
    powerLabel: Label | null = null;
    // @VMEvent({
    //     watchPath: ['*.power', '*.age'], onChangeEvent(opt) {
    //         this.onPowerChange(opt)
    //     }
    // })
    @property(Label)
    feedbackLabel: cc.Label = null;

    // @VMButton({
    //     watchPath: '*.power', min: 0, max: 900, operation: (opt) => {
    //         return opt.currentValue + 10;
    //     }
    // })
    @property(cc.Button)
    btnAdd: cc.Button = null;

    // @VMButton({
    //     watchPath: '*.power', min: 0, max: 900, operation: (opt) => {
    //         return opt.currentValue - 10;
    //     }
    // })
    @property(cc.Button)
    btnMul: cc.Button = null;


    // @VMEvent({
    //     watchPath: '*.list', onChangeEvent: (opt) => {
    //         // // opt.newValue
    //         console.log('DemoVMEvent-> ', JSON.stringify(opt.newValue));
    //     }
    // })
    @property(cc.Node)
    ArrayEvent: cc.Node = null;



    // @VMButton({
    //     watchPath: '*.list', min: 0, max: 900, operation: (opt) => {
    //         opt.currentValue.push(0);
    //         return opt.currentValue;
    //     }
    // })
    @property(cc.Button)
    btnAddArray: cc.Button = null;

    // @VMButton({
    //     watchPath: '*.list', min: 0, max: 900, operation: (opt) => {
    //         opt.currentValue.pop()
    //         return opt.currentValue;
    //     }
    // })
    @property(cc.Button)
    btnMulArray: cc.Button = null;




    _valueTest = 0;
    get ValueTest() {
        return this._valueTest;
    }
    data = {
        power: 0,
        age: 0,
        list: []
    }
    // // onLoad () {}
    start() {
        super.start();
    }


    onEnable() {
        VMCenter.add(this.data, this);
        VMCenter.Label(this, this.powerLabel, { watchPath: '*.power' });


        VMCenter.Event(this, this.feedbackLabel, {
            watchPath: ['*.power', '*.age'],
            onChangeEvent(opt) {
                this.onPowerChange(opt)
            }
        });


        // VMCenter.Button(this, this.btnAdd, {
        //     watchPath: '*.power',operation: (opt) => {
        //         return opt.currentValue + 10;
        //     }
        // });
        
        // VMCenter.Button(this, this.btnMul, {
        //     watchPath: '*.power', operation: (opt) => {
        //         return opt.currentValue - 10;
        //     }
        // });

        
        VMCenter.ButtonClick(this, this.btnAdd, {
            watchPath: ['*.power', '*.age'],operation: (opt) => {
                return [opt.currentValue[0] + 10,opt.currentValue[1] + 5];
            }
        });
        
        VMCenter.ButtonClick(this, this.btnMul, {
            watchPath: ['*.power', '*.age'], operation: (opt) => {
                return [opt.currentValue[0] - 10,opt.currentValue[1] - 5];
            }
        });

        VMCenter.Event(this,this.ArrayEvent,{
            watchPath: '*.list', 
            onChangeEvent: (opt) => {
                let arr: Array<number> = opt.newValue;
                
                let children = opt.node.children;
                let maxLength = Math.max(arr.length,children.length);
                for (let i = 0; i < maxLength; i++) {
                    let child = children[i];
                    if(arr[i] != undefined){
                        if(!child){
                            child = cc.instantiate(this.labelTemplete.node);
                            child.parent = this.ArrayEvent;
                            child.position = cc.v3(child.position.x,0);
                        }
                        child.getComponent(cc.Label).string = `${arr[i]}`;
                    }else{
                        if(child){
                            child.destroy();
                        }
                    }
                }
            }
        });

        // 这里的 min max 没用
        VMCenter.ButtonClick(this,this.btnAddArray,{
            watchPath: '*.list', min: 0, max: 900, operation: (opt) => {
                opt.currentValue.push(Math.round(Math.random()*100));
                return opt.currentValue;
            }
        });
        VMCenter.ButtonClick(this,this.btnMulArray,{
            watchPath: '*.list', min: 0, max: 900, operation: (opt) => {
                opt.currentValue.pop();
                return opt.currentValue;
            }
        })
    }

    onDisable() {

    }

    onPowerChange(opt) {
        this.feedbackLabel.string = `接收到事件${opt.watchPath},修改值为  ${opt.newValue}`;
    }
    // // update (dt) {}
}

